<template>
	<view class="register-content">
		<u-navbar title="注册"></u-navbar>
		<u-form :model="form" ref="uForm" :error-type="errorType">
			<u-select v-model="isShowList" mode="single-column" :list="list" :mask-close-able="false"
				@confirm="confirmInfo" @cancel="cancelInfo"></u-select>
			<u-form-item label="校区">
				<u-input v-model="campusLabel" placeholder="请选择校区" type="select" :select-open="isShowCampusIcon"
					@click="clickItem('Campus')" />
			</u-form-item>
			<u-form-item label="学院" v-show="isShowCollege">
				<u-input v-model="collegeLabel" type="select" placeholder="请选择学院" :select-open="isShowCollegeIcon"
					@click="clickItem('College')" />
			</u-form-item>
			<u-form-item label="专业" v-show="isShowMajor">
				<u-input v-model="majorLabel" type="select" placeholder="请选择专业" :select-open="isShowMajorIcon"
					@click="clickItem('Major')" />
			</u-form-item>
			<u-form-item label="班级" v-show="isShowClazz">
				<u-input v-model="clazzLabel" type="select" placeholder="请选择班级" :select-open="isShowClazzIcon"
					@click="clickItem('Clazz')" />
			</u-form-item>
			<u-form-item label="学号" prop="studentID" v-show="isShowRest">
				<u-input v-model="form.studentID" type="number" placeholder="请输入学号" />
			</u-form-item>

			<u-form-item label="姓名" prop="studentName" v-show="isShowRest">
				<u-input v-model="form.studentName" type="text" placeholder="请输入姓名" />
			</u-form-item>
			<u-form-item label="邮箱" prop="email" v-show="isShowRest">
				<u-input placeholder="请输入邮箱(目前只支持QQ邮箱)" v-model="form.email" type="text"></u-input>
			</u-form-item>
			<u-form-item label="性别" prop="gender" v-show="isShowRest">
				<u-radio-group v-model="form.gender">
					<u-radio shape="circle" v-for="(item, index) in gender" :key="index" :name="item.name">
						{{ item.name }}
					</u-radio>
				</u-radio-group>
			</u-form-item>
		</u-form>
		<u-button type="primary" @click="submit" :disabled="!isShowRest">注册</u-button>

		<!-- 以下为注册时，必要的其他弹出组件 -->
		<u-toast ref="uToast" />
		<u-modal v-model="isShowPopup" title="确认" :show-cancel-button="true" confirm-text="信息正确" confirm-color="#2979ff"
			cancel-text="还需修改" cancel-color="#fa3534" @confirm="confirmInfoFinally" @cancel="cancelInfoFinally">
			<view class="slot-content">
				<rich-text :nodes="information"></rich-text>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 表单填写错误的提示形式
				errorType: ['message'],
				form: {
					Token: '',
					// 学号
					studentID: '',
					// 学生姓名
					studentName: '',

					campusValue: '',
					collegeValue: '',
					majorValue: '',
					clazzValue: '',

					gender: null,
					email: ''
				},
				information: null,
				list: null,
				level: ['Campus', 'College', 'Major', 'Clazz', 'Rest'],
				isShowList: false,
				isShowPopup: false,
				isShowRest: false,

				isShowCampus: false,
				isShowCollege: false,
				isShowMajor: false,
				isShowClazz: false,

				isShowCampusIcon: false,
				isShowCollegeIcon: false,
				isShowMajorIcon: false,
				isShowClazzIcon: false,

				campusLabel: '',
				collegeLabel: '',
				majorLabel: '',
				clazzLabel: '',

				clickCurrent: null,
				clickCurrentNext: null,
				clickCurrentPrev: null,


				// 性别列表，用于渲染 radio
				gender: [{
						index: 0,
						name: '男'
					},
					{
						index: 1,
						name: '女'
					}
				],
				// 表单验证的校验规则
				rules: {
					studentID: [{
							required: true,
							message: '请输入学号',
							// 可以单个或者同时写两个触发验证方式
							trigger: ['change', 'blur']
						},
						{
							type: 'number',
							message: '学号必须为数字',
							trigger: ['change', 'blur']
						},
						{
							min: 8,
							message: '学号至少为 8 位',
							trigger: ['change', 'blur']
						}
					],
					studentName: [{
							required: true,
							message: '请输入姓名',
							trigger: ['change', 'blur']
						},
						{
							min: 2,
							message: '姓名不能小于 2 个字',
							trigger: ['change', 'blur']
						}
					],
					gender: [{
						required: true,
						message: '请选择性别',
						trigger: ['change', 'blur']
					}],
					email: [{
							required: true,
							message: '请输入 QQ 邮箱',
							// 可以单个或者同时写两个触发验证方式
							trigger: ['change', 'blur']
						},
						{
							// type: 'email',
							validator: (rule, value, callback) => {
								// 利用正则表达式检验 QQ 邮箱格式
								let pattern = /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@qq\.com/;
								let bool = pattern.test(value);
								console.log(bool);
								// 返回true表示校验通过，返回false表示不通过
								return bool;
							},
							message: '请输入正确的 QQ 邮箱格式',
							trigger: ['change', 'blur']
						}
					],
				},
			}
		},
		methods: {
			clickItem(value) {
				/**
				 * 此处代码是为了确认用户点击的是【校区，学院，专业，班级】中的哪个维度，并制成双向链表
				 */
				for (let i = 0; i < this.$data.level.length; i++) {
					if (this.$data.level[i] === value) {
						this.$data.clickCurrent = value;
						this.$data.clickCurrentNext = this.$data.level[i + 1];
						this.$data.clickCurrentPrev = this.$data.level[i - 1];
					}
				}
				/**
				 * 将当前维度右边的 三角图标 设置为打开状态，提示用户当前选择和点击的维度
				 */
				this.$data['isShow' + this.$data.clickCurrent + 'Icon'] = true;
				/**
				 * 如果当前维度里面有值，则说明用户上一次选择错误，据此假设进行处理
				 */
				if (this.$data[this.$data.clickCurrent.toLowerCase() + 'Label'] !== '') {
					/**
					 * 用户选择错误，则消去 当前维度 和 下一维度 之后的表单项，并同时消去 下一维度及其之后维度 里面的提示文字和值
					 */
					// 当前维度下标值
					let levelIndex;
					// 此处循环确定当前维度下标值
					for (let i = 0; i < this.$data.level.length; i++) {
						if (this.$data.level[i] === this.$data.clickCurrent) {
							levelIndex = i;
						}
					}
					// 消去 表单项、下一维度及其之后维度里面的提示文字和值
					for (let i = levelIndex; i + 2 < this.$data.level.length; i++) {
						this.$data['isShow' + this.$data.level[i + 2]] = false;
						this.$data[this.$data.level[i + 1].toLowerCase() + 'Label'] = '';
						this.$data.form[this.$data.level[i + 1].toLowerCase() + 'Value'] = '';
					}
				}

				/**
				 * 如果用户重新选择了第一维度：校区，则重新发送请求，并显示校区下拉菜单
				 */
				if (this.$data.clickCurrent === this.$data.level[0]) {
					this.$u.post('/user/get/allCampus')
						.then(res => {
							this.$data.list = res.rst;
							this.$data.isShowList = true;
						})
					/**
					 * 如果选择的是其他维度，则按接口形式直接进行请求，并显示下拉菜单
					 */
				} else {
					this.$u.post('/user/get/all' + this.$data.clickCurrent + 'ById', {
							id: this.$data.form[this.$data.clickCurrentPrev.toLowerCase() + 'Value']
						})
						.then(res => {
							this.$data.list = res.rst;
							this.$data.isShowList = true;
						})
				}
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						// 表单验证通过时将提示框中的内容进行赋值
						this.$data.information =
							"校区：" + this.$data.campusLabel +
							"<br/>学院：" + this.$data.collegeLabel +
							"<br/>专业：" + this.$data.majorLabel +
							"<br/>班级：" + this.$data.clazzLabel + "<br/>" +
							"<br/>姓名：" + this.$data.form.studentName +
							"<br/>性别：" + this.$data.form.gender +
							"<br/>学号：" + this.$data.form.studentID +
							"<br/>邮箱：" + this.$data.form.email;
						// 显示提示框
						this.$data.isShowPopup = true
					} else {
						// 提示用户信息未输入完成
						this.$refs.uToast.show({
							title: '请填写完整信息',
							type: 'error',
							icon: false,
							position: 'bottom'
						});
					}
				})
			},
			confirmInfo(value) {
				/**
				 * 确认信息后，将 三角图标 改为关闭状态
				 */
				this.$data['isShow' + this.$data.clickCurrent + 'Icon'] = false;
				/**
				 * 将 当前维度 的 提示文字 和 实际值 赋值给数据项
				 */
				this.$data[this.$data.clickCurrent.toLowerCase() + 'Label'] = value[0].label;
				this.$data.form[this.$data.clickCurrent.toLowerCase() + 'Value'] = value[0].value;
				/**
				 * 显示下一表单项
				 */
				this.$data['isShow' + this.$data.clickCurrentNext] = true;
			},
			confirmInfoFinally(value) {
				let _this = this;
				let sexBool = this.$data.form.gender === '女';
				let localValue = uni.getStorage("UserMsg");
				uni.setStorage({
					key: 'UserMsg',
					data: {
						Token: localValue.Token,
						campusLabel: this.$data.campusLabel,
						collegeLabel: this.$data.collegeLabel,
						majorLabel: this.$data.majorLabel,
						clazzLabel: this.$data.clazzLabel,
						// 学号
						StuID: this.$data.form.studentID,
						// 学生姓名
						studentName: this.$data.form.studentName,
						// QQ邮箱
						email: this.$data.form.email,
						// 性别
						gender: sexBool
					},
					success: function() {
						// 携带参数跳转往   设置密码   页面
						_this.$u.route({
							type: 'navigateTo',
							url: '/pages/setPassword/index',
							params: _this.$data.form
						});
					}
				});
			},
			cancelInfo(value) {
				/**
				 * 取消信息，也将 三角图标 改为关闭状态
				 */
				this.$data['isShow' + this.$data.clickCurrent + 'Icon'] = false;
			},
			cancelInfoFinally() {
				/**
				 * 保留方法，暂无用处，不做说明
				 */
			},
		},
		onLoad(option) {
			this.$data.form.studentID = option.studentID
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style>
	/* 整个注册页面加了美化效果 */
	.register-content {
		margin: 0rpx 50rpx;
	}

	/* 对确认信息提示框中的美化 */
	.slot-content {
		text-align: center;
		margin: 20% 0%;
	}
</style>
